<template>
    <div>
    <div class="check" style="width: 20%;float: right;">
      <el-card class="box-card" shadow="always" v-loading="loading" style="margin-left: -10px; width: 100%;height: 80vh">
        <div style="width: 100%;margin-left: -15px" class="text item">
        <el-form :model="form" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
          <el-form-item
            prop="departure"
            label="起始点">
            <el-select v-model="form.departure.id"  filterable style="width: 95%" placeholder="请选择" @change="select" >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.cityName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-for="(city, index) in form.citys"
            :label="'途径点' + (index+1)"
            :key="city.id">
            <el-select v-model="city.id" filterable placeholder="请选择" style="width: 60%" >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.cityName"
                :value="item.id"
                :disabled="item.disabled">
              </el-option>
            </el-select>
            <el-button @click.prevent="removeDomain(city)">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="submitForm('dynamicValidateForm')" plain>获取路线</el-button>
            <el-button type="info" @click="addDomain" plain>途经点</el-button>
          </el-form-item>
        </el-form>
        </div>
      </el-card>
    </div>
      <el-card class="box-card" shadow="always" style="width: 78%;height: 80vh">
    <div style="width: 100%;height:90vh;">
      <baidu-map
        class="map-wrap"
        :center="mapData.center"
        :zoom="mapData.zoom"
        @ready="mapHandler">
      </baidu-map>
    </div>
      </el-card>
    </div>
</template>

<script>
export default {
  name: "TransitPath",
  data() {
    return{
      //动态增加表单
      form: {
        citys: [],
        departure:{}
      },
      cityList:[],
      //地图元素
      mapData: {
        //中心坐标
        center: { lng: 108, lat: 35 },
        //缩放级别
        zoom: 5,
      },
      map: '',
      BMap: '',
      // 城市Id数据
      cityIds:[],
      loading:false,
      // 最短路径城市顺序数组
      shortestPathCityList:[],
      // 距离
      distance: ''
    }
  },
  methods: {
    submitForm() {
      this.cityIds=[]
      this.loading=true;
      for (let city of this.form.citys) {
        this.cityIds.push(city.id)
      }
      this.cityIds.unshift(this.form.departure.id)
      this.$axios({
        url: 'transitPath/getShortestPath',
        method: 'post',
        data: this.cityIds
      }).then(res => {
        if (res.data.success) {
          this.shortestPathCityList = res.data.object.list;
          this.distance = res.data.object.distance;
          this.loading=false;
          this.mapHandlerTrack();
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    removeDomain(city) {
      let index = this.form.citys.indexOf(city)
      if (index !== -1) {
        this.form.citys.splice(index, 1)
      }
    },
    addDomain() {
      this.form.citys.push(
         {id:''}
      );
    },
    select(){
      for (let val of this.cityList) {
        if (val.id==this.form.departure.id){
          val.disabled=true;
        }else {
          val.disabled=false;
        }
      }
    },
    mapHandler({ BMap, map }){
      this.BMap = BMap
      this.map = map
    },
    getCityList(){
      this.$axios({
        url: 'base/city/list',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.cityList=res.data.object
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    mapHandlerTrack() {
      let map = this.map
      let BMap = this.BMap
      map.enableScrollWheelZoom();
      map.clearOverlays();
      let p1 = new BMap.Point(this.shortestPathCityList[0].longitude, this.shortestPathCityList[0].latitude);
      let orderRoute = []
      let routeString = this.shortestPathCityList[0].cityName;
      for (let i = 1; i < this.shortestPathCityList.length - 1; i++) {
        let p = new BMap.Point(this.shortestPathCityList[i].longitude, this.shortestPathCityList[i].latitude);
        orderRoute.push(p)
        routeString = routeString+ "→" + this.shortestPathCityList[i].cityName
      }
      routeString = routeString + "→" + this.shortestPathCityList[this.shortestPathCityList.length - 1].cityName
      let p2 = new BMap.Point(this.shortestPathCityList[this.shortestPathCityList.length - 1].longitude,
        this.shortestPathCityList[this.shortestPathCityList.length - 1].latitude);
      let driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, autoViewport: true}});
      driving.search(p1, p2, {waypoints: orderRoute})
      let titleContent1 = `
          <h4>路线：${routeString}</h4>
          <h4>总距离：${(this.distance*0.001).toFixed(2)}km</h4>
          `;
      let opts = {
        position: p1, // 指定文本标注所在的地理位置
        offset: new BMap.Size(-800, -120) //设置文本偏移量
      };
      let label = new BMap.Label(titleContent1, opts);
      label.setStyle({
        color: "#575757",
        fontSize: "700",
        lineHeight: "20px",
        fontFamily: "黑体",
        borderRadius: "6px",
        padding: "3px 8px",
        textAlign: "left",
        opacity: "0.9",
        border: "none",
        boxShadow: "0px 0px 10px #ccc"
      });
      map.addOverlay(label);
    }
  },
  created() {
    this.getCityList()
  }
}
</script>

<style scoped>
.map-wrap {
  width: 100%;
  height: 100%;
  margin: 0;
}
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
</style>
